import { useState, useRef } from 'react';
import { Form, Input, Button, Select, message } from 'antd';
import { addAccount } from '@/api/account';

const { Option } = Select;

const Add = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 用户组选项数据
  const groupOptions = [
    { value: '超级管理员', label: '超级管理员' },
    { value: '编辑人员', label: '编辑人员' },
    { value: '普通用户', label: '普通用户' }
  ];

  /**
   * 提交表单
   * 1. 先进行表单验证
   * 2. 验证通过后调用API
   * 3. 处理响应结果
   */
  const submitForm = async () => {
    try {
      setLoading(true);
      // 验证表单
      const values = await form.validateFields();
      
      // 调用API
      const res = await addAccount(values);
      console.log(res);  // 打印响应数据
      message.success('添加成功');  // 显示成功提示
      form.resetFields();  // 重置表单
    } catch (error) {
      console.error(error);  // 打印错误
      if (error.errorFields) {
        // 表单验证错误
        message.warning('请正确填写表单');
      } else {
        // API调用错误
        message.error('添加失败');  // 显示错误提示
      }
    } finally {
      setLoading(false);
    }
  };

  /**
   * 重置表单
   * 调用表单的resetFields方法重置所有字段
   */
  const resetForm = () => {
    form.resetFields();
  };

  return (
    <div className="add-account-container">
      {/* 标题 */}
      <h2 className="title">添加账号</h2>
      
      {/* Ant Design 表单组件 */}
      <Form
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 600 }}
      >
        {/* 账号输入项 */}
        <Form.Item
          label="账号"
          name="account"
          rules={[
            { required: true, message: '请输入账号' },  // 必填验证
            { min: 4, max: 16, message: '长度在4到16个字符' }  // 长度验证
          ]}
        >
          <Input placeholder="请输入账号" allowClear />  {/* 可清空内容 */}
        </Form.Item>
        
        {/* 密码输入项 */}
        <Form.Item
          label="密码"
          name="password"
          rules={[
            { required: true, message: '请输入密码' },  // 必填验证
            { min: 3, max: 10, message: '长度在3到10个字符' }  // 长度验证
          ]}
        >
          <Input.Password placeholder="请输入密码" allowClear />  {/* 密码类型 */}
        </Form.Item>
        
        {/* 用户组选择项 */}
        <Form.Item
          label="用户组"
          name="userGroup"
          rules={[{ required: true, message: '请选择用户组' }]}  // 必填验证
        >
          <Select placeholder="请选择用户组" style={{ width: '100%' }}>
            {/* 动态生成选项 */}
            {groupOptions.map(item => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        
        {/* 表单操作按钮 */}
        <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
          <Button type="primary" onClick={submitForm} loading={loading}>
            立即添加
          </Button>
          <Button onClick={resetForm} style={{ marginLeft: 8 }}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Add;